<template>
    <el-drawer
    title="证书延期"
    direction="rtl"
    ref="drawer"
    size="42%"
    :visible.sync="visible">
    <div class="demo-drawer__header">
      <el-button size="mini" @click="visible = false">取 消</el-button>
      <el-button type="primary" plain size="mini" @click="doRenewal()">延 期</el-button>
    </div>
    <div>
      <h4><span style="color:#fc8e2d">基础信息</span></h4>
      <el-form label-width="100px" class="queryForm">
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名：">
                {{c.name}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号：">
                {{c.idCard}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="证书类型：">
                {{c.idType}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证书专业：">
                {{c.profession}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="证书编号：">
                {{c.certificateNo}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发证时间：">
                {{c.releaseTime? c.releaseTime.substring(0,10):''}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="到期时间：">
                {{c.validityEndTime? c.validityEndTime.substring(0,10):''}}
              </el-form-item>
            </el-col>
          </el-row>
          <div v-if="c.certificateType == 2">
          <el-row>
            <el-col :span="12" v-if="c.borrowTime">
              <el-form-item label="借入日期">
                {{c.borrowTime.substring(0,10)}}
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="c.borrowEndTime">
              <el-form-item label="到期日期">
                {{c.borrowEndTime.substring(0,10)}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="证书来源">
                <span v-if="c.borrowCandidatesSources === 1">
                  个人
                </span>
                <span v-else-if="c.borrowCandidatesSources === 2">
                  企业
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="来源企业" v-if="c.borrowCandidatesSources === 2">
                {{c.borrowOrgName}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系人">
                {{c.borrowContact}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号">
                {{c.borrowContactMobile}}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="证书扫描件：">
              <ele-image :urls="c.certifInfoList"></ele-image>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="c.certificateType === 2 && c.contractInfoList && c.contractInfoList.length > 0">
            <el-form-item label="合同扫描件：">
              <ele-image :urls="c.contractInfoList"></ele-image>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div v-for="(item,i) in ctList" :key="'cts' + i">
      <certifirenewal-details :ct="item"></certifirenewal-details>
    </div>
    <el-dialog title="证书延期" style="left:30%;" width="70%" :visible.sync="dialogFormVisible" append-to-body>
      <el-form :model="form" ref="form" :rules="dataRule" label-width="140px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="延期证书" class="ell-form-item">
              {{c.idType + '['+ c.profession +']'}}
            </el-form-item>
          </el-col>
          <el-col :span="12" class="ell-form-item">
            <el-form-item label="延期时间" prop="renewalTime">
              <el-date-picker type="date" v-model="form.renewalTime" placeholder="选择延期时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="ell-form-item">
            <el-form-item label="新有效期开始时间" prop="validityStartTime">
              <el-date-picker type="date" v-model="form.validityStartTime" placeholder="选择有效期开始时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="ell-form-item">
            <el-form-item label="新有效期结束时间" prop="validityEndTime">
              <el-date-picker type="date" v-model="form.validityEndTime" placeholder="选择有效期结束时间" style="width:100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" :rows="6" v-model="form.remark" placeholder="请填写情况说明"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
              <el-form-item label="证书和证明">
                <el-upload
                  class="upload-demo"
                  ref="certiUpload"
                  drag
                  :action="uploadUrl()"
                  :with-credentials="true"
                  :headers="myHeader"
                  :on-success="onCertiSuccess"
                  :on-error="onError"
                  multiple>
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text"><em>点击上传</em></div>
                  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过800kb</div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="mini" type="warning" @click="dataFormSubmit()">确 定</el-button>
      </div>
    </el-dialog>
  </el-drawer>
</template>

<script>
  import Vue from "vue"
  import CertifirenewalDetails from './certifirenewal-item-details'
  import EleImage from '../certinfo/ele-image.vue'
  export default {
    data () {
      return {
        visible: false,
        c: {},
        ctList: [],
        dialogFormVisible: false,
        form: {
          renewalTime: '',
          validityStartTime: '',
          validityEndTime: '',
          remark: ''
        },
        dataRule: {
          renewalTime: [
            { required: true, message: '选择延期时间', trigger: 'blur' }
          ],
          validityStartTime: [
            { required: true, message: '选择有效期开始时间', trigger: 'blur' }
          ],
          validityEndTime: [
            { required: true, message: '选择有效期结束时间', trigger: 'blur' }
          ]
        },
        contractPicList:[],
      }
    },
    computed: {
      myHeader(){
        return {
            "token":Vue.cookie.get('token')
        }
      }
    },
    components: {
      CertifirenewalDetails, EleImage
    },
    methods: {
      onCertiSuccess(response, file, fileList){
        this.contractPicList = fileList
      },
      onError(err, file, fileList){
        this.$message.error("上传失败")
      },
      uploadUrl(){
        return this.$http.adornUrl(`/certificate/certificateInfo/upload`)
      },
      doRenewal(){
        this.$confirm('是否已参加相关行政主管部门的延期工作？', '证书延期', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          confirmButtonClass: 'el-button--warning',
          showClose: false,
          center: true
          }).then(() => {
            this.dialogFormVisible = true
          }).catch(() => {
            this.$confirm(`您的证书有效期为：<span style='color:#fc8e2d;'>${this.c.validityEndTime.substring(0,10)}</span>，请到相关行政部门参加延期工作!`, '证书延期', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              confirmButtonClass: 'el-button--warning',
              dangerouslyUseHTMLString: true, 
              showClose: false,
              center: true
            }).then(() => {})     
          });
      },
      dataFormSubmit () {
        let contractPics = []
        if(this.contractPicList.length > 0){
          for(let i=0; i< this.contractPicList.length; i++){
            contractPics.push(this.contractPicList[i].response.fileName)
          }
        }
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/certificate/certificateRenewalInfo/save'),
              method: 'post',
              data: this.$http.adornData({
                'certificateId': this.c.id,
                'tenantId': this.c.tenantId,
                'renewalTime': this.$dateFormat(this.form.renewalTime),
                'validityStartTime': this.$dateFormat(this.form.validityStartTime),
                'validityEndTime': this.$dateFormat(this.form.validityEndTime),
                'remark': this.form.remark,
                'contractPic': contractPics.join(",")
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.form = {
                  renewalTime: '',
                  validityStartTime: '',
                  validityEndTime: '',
                  remark: ''
                }

                this.$nextTick(() => {
                  if (this.c.id) {
                    this.$http({
                      url: this.$http.adornUrl('/certificate/certificateRenewalInfo/getRenewals'),
                      method: 'get',
                      params: this.$http.adornParams({'id':this.c.id})
                    }).then(({data}) => {
                      if (data && data.code === 0) {
                        this.c = data.c
                        this.ctList = data.ctList
                      }
                    })
                  }
                })
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.dialogFormVisible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      init (id) {
        this.form = {
                  renewalTime: '',
                  validityStartTime: '',
                  validityEndTime: '',
                  remark: ''
                }
        this.c.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          if (this.c.id) {
            this.$http({
              url: this.$http.adornUrl('/certificate/certificateRenewalInfo/getRenewals'),
              method: 'get',
              params: this.$http.adornParams({'id':this.c.id})
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.c = data.c
                this.ctList = data.ctList
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
    .demo-drawer {
      &__content {
          display: flex;
          flex-direction: column;
          height: 100%;
          form {
              flex: 1;
          }
      }
      &__footer {
          display: flex;
          button {
              flex: 1;
          }
      }
      &__header {
          text-align:right;
          margin-bottom:20px;
          width:100%;
      }
    }
    .el-drawer__body {
        padding: 20px;
    }
    .el-drawer__body{
      overflow-x:hidden;
      overflow-x:auto;
    }
    .queryForm .el-form-item {
        margin-bottom: 0px;
    }
    .ell-form-item {
        margin-bottom: 15px;
    }
    .el-button-warning {
      color: #fc8e2d;
      background-color: #fff;
      border-color: #fc8e2d;
      margin:0 20px;
    }
    .el-message-box__btns {
      margin-bottom: 10px;
      margin-top: 15px;
    }
    .el-message-box__title {
      margin-top: 10px;
      margin-bottom: 15px;
    }
    .el-upload-dragger{
      width: 100%;
    }
</style>
